<template>
  <div>
    <div
      v-for="(item,index) in queryStr.split(',')"
      :key="index"
      style="display:inline-block;width:19%;margin-bottom:-26px;"
    >
      <input
        :id="item.split(':')[1]"
        style="width:200px;height:30px;padding-top:17px;padding-bottom:16px;"
        required
        type="text"
        @change="getQueryParams(item.split(':')[1])"
      >
      
      <!-- 冒号用于传、取参数 -->
      <label
        :alt="'请输入'+item.split(':')[0]"
        :placeholder="item.split(':')[0] +'：'"
        style="margin-left:-21px;margin-top:-61px;"
      ></label>
    </div>
  </div>
</template>

<script>
// 巴士：用于兄弟组件间传值
import bus from "../../../../../static/base/eventBus.js";

var queryParamMap = new Map(); // 查询参数Set
export default {
  name: "paramQuery",
  props: ["queryStr"], //得到父组件传递过来的数据
  methods: {
    getQueryParams: function(param) {
      // 得每个参数的值
      var paramVal = $("#" + param + "").val();
      if (0 != paramVal.length) {
        queryParamMap.set(param, paramVal.replace(/\s*/g, ""));
      } else {
        queryParamMap.delete(param, paramVal);
      }

      // 传参到兄弟组件：queryBtn。$emit("监听的事件名", 参数)。queryParamMap是参数，可以传多个参数，用逗号分隔
      bus.$emit("queryParam", queryParamMap);
    }
  },
  created() {
    // 重置查询
    bus.$on("resetParam", reset => {
      queryParamMap.forEach(function(value, key) {
        // var paramVal = $("#" + key + "").val();
        queryParamMap.delete(key, value);
        $("#" + key + "").val("");
      });

      // 传参到兄弟组件：queryBtn。$emit("监听的事件名", 参数).
      bus.$emit("queryParam", queryParamMap);
    });
  }
};
</script>

<style>
@import "../../../../../static/input/input.css";
</style>